<template>
  <div class="car-serve-list">
  <l-page-bar>
    汽车服务搜索结果页
  </l-page-bar>

  <l-page-path>
    汽车服务搜索结果页
  </l-page-path>
  
  <div class="car-serve-list-search-bar">
    <l-search-bar :config='searchBarConfig' @change='select'></l-search-bar>
  </div>
  
  
  <div class="page-content">

    <i-row :gutter='20' >
      
      <i-col :sm='24' :xm='24'>

        <i-row :gutter='20'>
          <i-col :sm='8' :xm='24' v-for='(item, index) of severList' :key='index'>
            <div class="car-item">
              <l-car-serve-card :info='item' ></l-car-serve-card>
            </div>
            </i-col>
        </i-row>
        
      </i-col>

      <!-- banner -->
      <!-- <i-col :sm='6'>
        <div class="advertisement">
            Advertisement
        </div>
      </i-col> -->
      
    </i-row>
    
    <div class="page-bar">
      <i-page @on-change='changePage' :current='currentPage' :total='pageTotal' :pageSize='pageSize' ></i-page>
    </div>
      
  </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';
import CarServeCard from '@/components/car_serve_card/index.vue';
import ICarServCard from '@/components/car_card/index.vue';
import SearchBar from '@/components/search_bar/index.vue';
import PageBar from '@/components/page_bar/index.vue';
import PagePath from '@/components/page_path/index.vue';
import commendData from '@/utils/commend.ts';


@Component({
  components:{
    'l-car-serve-card': CarServeCard,
    'l-search-bar': SearchBar,
    'l-page-bar': PageBar,
    'l-page-path': PagePath
  }
})
export default class CarServeList extends Vue {

  pageSize: number = 9
  currentPage: number = 1
  severList: Array<ICarServCard> = [] 
  pageTotal: number = 1
  $API: any
  $globState: any
  searchBarConfig:any = []

  created(){
    
    let initData = this.buildReq();
    this.getCarList(initData)
    this.searchBarConfig = this.$globState.searchConfig.serve

  }

  changePage(pageNum:number){

    this.currentPage = pageNum;
    let initData = this.buildReq();
    this.getCarList(initData)

  }

  // 类型选择, 请求数据
  select(data:any){
      
      // 初始化页号
      let req = this.buildReq({
        currentPage: 0,
      }) 
  
      this.getCarList(req)
  }

  buildReq(config={}){
    let req: any = {
      pageSize: this.pageSize,
      currentPage: this.currentPage
    };
    
    this.searchBarConfig.forEach( (item: any) =>{
      req[item.key] = item['current'];
    })

    return Object.assign(req, config)

  }

  // 请求列表
  getCarList(req?:any){
    let $API:any = this.$API; 
    
    return $API.getServeList(req).then( (res: any) =>{

      this.severList = res.serves;
      this.pageTotal = res.pages.total;

    })
     
  }

  
}

</script>
<style lang="less">

.car-serve-list{

}

.car-item{
  margin-bottom: 20*@rem;
}

.advertisement{
  height: 100%;
  background: #eee;
}

</style>
